<template>
	<view class="content">
		<view class="address-list">
			<view class="list-item" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
			<view class="wrapper">
				<view class="address-box">
					<text v-if="item.isDefault" class="tag">默认</text>
					<text class="address">{{item.region.replace(/,/g, '')}} {{item.address}}</text>
				</view>
				<view class="u-box">
					<text class="name">{{item.name}}</text>
					<text class="mobile">{{item.mobile}}</text>
				</view>
			</view>
				<text class="edit-btn" @click.stop="addAddress('edit', item)">
					<uni-icons type="compose" size="20" color="#666"></uni-icons>
				</text>
			</view>
		</view>
		<button class="add-btn" @click="addAddress('add')">新增地址</button>
	</view>
</template>

<script>
	import {listAddressNoPage} from "@/api/sell/address";

  export default {
		data() {
			return {
				source: 0,
				addressList: []
			}
		},
    onShow() {
      this.loadData();
    },
		onLoad(option){
      this.source = option.source;
		},
		methods: {
      loadData() {
        listAddressNoPage({}).then(res => {
          this.addressList = res.data
        })
      },
			//选择地址
			checkAddress(item){
				if(this.source == 1){
					//this.$api.prePage()获取上一页实例，在App.vue定义
          uni.$emit('addressData', item);
					uni.navigateBack()
				}
			},
			addAddress(type, item){
        console.log(type)
				uni.navigateTo({
					url: `/pages/sellment/address/addressManage?type=${type}` + (type === 'add' ? '' : ('&id=' + item.id))
				})
			},
			//添加或修改成功之后回调
			refreshList(data, type){
				//添加或修改后事件，这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
				this.addressList.unshift(data);

				console.log(data, type);
			}
		}
	}
</script>

<style lang='scss'>
page {
	background: #f8f8f8;
	padding-bottom: 120rpx;
	}

.content {
		position: relative;
	padding: 20rpx;
	}

.address-list {
	.list-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
		position: relative;
		
		&:active {
			background: #fafafa;
		}
	}
}

.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

.address-box {
		display: flex;
	align-items: flex-start;
	margin-bottom: 16rpx;
	
	.tag {
      min-width: fit-content;
		font-size: 22rpx;
		color: #e84d1c;
		margin-right: 12rpx;
		background: #fff5f2;
		border: 1px solid #ffcfbf;
		border-radius: 4rpx;
		padding: 4rpx 12rpx;
			line-height: 1;
		}
	
	.address {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
		flex: 1;
		}
	}

.u-box {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	color: #666;
	
	.name {
		margin-right: 20rpx;
		}
	
	.mobile {
		color: #999;
	}
}

.edit-btn {
		display: flex;
		align-items: center;
	justify-content: center;
	width: 80rpx;
	height: 80rpx;
	
	&:active {
		opacity: 0.7;
	}
	}

.add-btn {
		position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 20rpx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
	width: 690rpx;
	height: 88rpx;
	font-size: 32rpx;
		color: #fff;
	background: linear-gradient(90deg, #e84d1c, #f06e44);
	border-radius: 44rpx;
	box-shadow: 0 4rpx 16rpx rgba(232, 77, 28, 0.3);
	
	&:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(232, 77, 28, 0.2);
	}
	}
</style>
